<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-survey-multi-choice.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    // definiting two different response scales that can be used.
    var page_1_options = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"];
    var page_2_options = ["Strongly Disagree", "Disagree", "Somewhat Disagree", "Neutral", "Somewhat Agree", "Agree", "Strongly Agree"];

    var multi_choice_block = {
      type: jsPsychSurveyMultiChoice,
      questions: [
        {prompt: "I like vegetables", name: 'Vegetables', options: page_1_options, required:true}, 
        {prompt: "I like fruit", name: 'Fruit', options: page_2_options, required: false}
      ],
      randomize_question_order: true
    };

    var multi_choice_block_horizontal = {
      type: jsPsychSurveyMultiChoice,
      questions: [
        {prompt: "I like vegetables", options: page_1_options, required: true, horizontal: true,}, 
        {prompt: "I like fruit", options: page_2_options, required: false, horizontal: true}
      ],
    };

    jsPsych.run([multi_choice_block, multi_choice_block_horizontal]);

  </script>
</html>
